<template>
	<el-form label-width="100px">
		<div class="point-box">{{ calcPoint(supplierConfig.point) }}</div>
		<el-tree  class="tree tree-category" ref="treeCategory"
			:data="categoryList" 
			:default-checked-keys="categoryId"
			show-checkbox
			:props="{label: 'categoryNameAll'}" 
			node-key="id"
		>
			<div class="tree-item" slot-scope="{ node, data }">
				<div class="item">{{ node.label }}</div>
			</div>
		</el-tree>
	</el-form>
</template>

<script>
	import { categoryPrice, cateTree } from '@/api/price.api'
	export default{
		name: "point-category-config",
		data() {
			return {
				supplierConfig: {
					point: 0,
					pointId: ""
				},
				categoryList: [],
				categoryId: []
			}
		},
		props: {
			priceId: {
				type: String,
				default: ""
			},
		},
		methods: {
			init() {
				this.getCategotyList();
				categoryPrice(this.priceId).then(res => {
					this.supplierConfig.point = res[0].point.point
					this.categoryId = res.map(row => {
						return row.categoryId
					})
				})
			},
			getCategotyList() {
				if(this.categoryList.length == 0) {
					cateTree().then(res => {
						this.categoryList = res
					})
				}
			},
			calcPoint(point) {
				return (point/100).toFixed(2) + "%"
			},
		}
	}
</script>

<style scoped lang="scss">
	.tree-category{
		height: 50vh;
		overflow-y: scroll;
	}
	.point-box{
		padding: 10px 10px;
	}
</style>